<template>
  <div class="app-container">
    <div class="cardBox">
      <el-form :inline="true" class="search-form" label-width="100px">
        <el-row style="display: flex; flex-wrap: wrap">
          <div style="flex: 1">
            <el-form-item label="订单流水号" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入订单流水号"
                v-model="searchForm.order_trade_no"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="支付单号" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入支付单号"
                v-model="searchForm.pay_order_no"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="收货人电话" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入收货人电话"
                v-model="searchForm.addr_phone_number"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="发货状态" style="margin: 5px 0">
              <el-select
                clearable
                v-model="searchForm.status"
                placeholder="请选择发货状态"
              >
                <el-option
                  v-for="item in [
                    { name: '待发货', id: 1 },
                    { name: '待收货', id: 2 },
                    { name: '交易完成', id: 3 },
                  ]"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="商品ID"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入商品ID"
                v-model="searchForm.supplier_goods_id"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="商品名称"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入商品名称"
                v-model="searchForm.supplier_goods_name"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="供货商ID"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入供货商ID"
                v-model="searchForm.supplier_id"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              v-if="searchDisplay"
              label="用户昵称"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入用户昵称"
                v-model="searchForm.user_nickname"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="用户手机号"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入用户手机号"
                v-model="searchForm.user_mobile"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="收货人姓名"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入收货人姓名"
                v-model="searchForm.addr_recipient"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              v-if="searchDisplay"
              label="用户手机号"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入用户手机号"
                v-model="searchForm.user_mobile"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="收货地址"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入收货地址"
                v-model="searchForm.addr_details"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="申请起始时间"
              style="margin: 5px 0"
            >
              <el-date-picker
                v-model="create_time"
                type="datetimerange"
                @change="create_timeWay"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="支付起始时间"
              style="margin: 5px 0"
            >
              <el-date-picker
                v-model="pay_time"
                type="datetimerange"
                @change="pay_timeWay"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div style="padding: 5px 0">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resetting"
                >重置</el-button
              >
              <el-button
                v-if="!searchDisplay"
                type="warning"
                icon="el-icon-caret-bottom"
                @click="searchDisplay = true"
                >展开</el-button
              >
              <el-button
                v-else
                type="warning"
                icon="el-icon-caret-top"
                @click="searchDisplay = false"
                >收起</el-button
              >
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="grouping cardBox" style="margin-top: 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-button @click="pathWay" icon="el-icon-tickets" type="primary"
              >售后订单</el-button
            >
          </el-col>
          <el-col :span="4" style="float: right">
            <div class="right-panel el-button-group">
              <el-button
                class=""
                icon="el-icon-refresh"
                size="mini"
                @click="getListWay"
              ></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button
                    class=""
                    icon="el-icon-s-operation"
                    size="mini"
                  ></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col>
          <el-table
            highlight-current-row
            :data="OrderList"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    fruit == 'supplier_sku_img' ||
                    fruit == 'supplier_goods_main_image' ||
                    fruit == 'sku_img'
                  "
                  style="width: 40px; height: 40px; margin: 0 auto"
                >
                  <el-image
                    :src="scope.row[fruit]"
                    :preview-src-list="[scope.row[fruit]]"
                  />
                </div>

                <span v-else-if="fruit == 'delivery_address'">
                  {{ scope.row.delivery_address.province_name }}
                  {{ scope.row.delivery_address.city_name }}
                  {{ scope.row.delivery_address.district_name }}
                </span>
                <div v-else-if="fruit == 'delivery'">
                  <el-button
                    v-if="scope.row.delivery_list.length > 0"
                    type="text"
                    @click="drawerHandle(scope.row)"
                    >查看快递信息</el-button
                  >
                  <el-tag v-else type="info"> 无 </el-tag>
                </div>
                <span v-else-if="fruit == 'recipient'">
                  {{ scope.row.delivery_address.recipient }}
                </span>
                <span v-else-if="fruit == 'phone_number'">
                  {{ scope.row.delivery_address.phone_number }}
                </span>
                <span v-else-if="fruit == 'address_details'">
                  {{ scope.row.delivery_address.address_details }}
                </span>
                <span v-else>
                  {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              width="150"
              prop="address"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  style="margin: 5px"
                  v-hasPermi="'orderlist/qfh'"
                  v-if="scope.row.status == 1"
                  type="warning"
                  size="mini"
                  @click="editNotesWay(scope.row)"
                >
                  去发货
                </el-button>
                <el-tag
                  style="margin: 5px"
                  v-if="scope.row.status == 2"
                  type="info"
                  >待收货</el-tag
                >
                <el-tag
                  style="margin: 5px"
                  v-if="scope.row.status == 3"
                  type="success"
                  >已完成</el-tag
                >

                <el-button
                  style="margin: 5px"
                  type="primary"
                  size="mini"
                  @click="detailsDialogway(scope.row)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table></el-col
        >
      </el-row>
      <el-row style="text-align: right">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="searchForm.page"
          :limit.sync="searchForm.pageSize"
          @pagination="getListWay"
        />
      </el-row>
    </div>

    <!-- 去发货弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      title="去发货"
      :visible.sync="dialogSendOutGoods"
      width="500px"
      @close="SendOutGoodsClose"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="快递名称" prop="express_name">
          <el-input
            maxlength="20"
            show-word-limit
            clearable
            v-model="form.express_name"
            placeholder="请输入快递名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="express_num">
          <el-input
            clearable
            maxlength="20"
            show-word-limit
            v-model="form.express_num"
            placeholder="请输入快递单号"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSendOutGoods = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitWay"
          :loading="dialogSendOutGoodsSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 查看快递信息 -->
    <el-dialog
      :close-on-click-modal="false"
      title="快递信息"
      :visible.sync="dialogdelivery"
      width="700px"
    >
      <el-descriptions
        :style="index !== 0 ? 'margin-top:20px' : ''"
        v-for="(item, index) in delivery_list"
        :key="index"
        class="margin-top"
        :title="item.express_name"
        :column="3"
        border
      >
        <el-descriptions-item label="快递">
          {{ item.express_name }}
        </el-descriptions-item>
        <el-descriptions-item label="订单号">
          {{ item.express_num }}
        </el-descriptions-item>
        <el-descriptions-item label="发货时间">
          {{ item.created_at }}
        </el-descriptions-item>
        <el-descriptions-item label="收货人名称">
          {{ item.recipient }}
        </el-descriptions-item>
        <el-descriptions-item label="收货人手机号">
          {{ item.phone_number }}
        </el-descriptions-item>
        <el-descriptions-item label="省市区">
          {{ item.province_name }}
          {{ item.city_name }}
          {{ item.district_name }}
        </el-descriptions-item>
        <el-descriptions-item label="详细地址">
          {{ item.address_details }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogdelivery = false">取 消</el-button>
        <el-button type="primary" @click="dialogdelivery = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      title="订单信息"
      :visible.sync="detaildialog"
      width="800px"
    >
      <div>
        <el-row style="position: relative" v-loading="detailLoading">
          <el-descriptions
            style="margin-top: 20px"
            class="margin-top"
            :column="3"
            title="订单状态"
            border
            labelClassName="labelView"
          >
            <el-descriptions-item label="订单状态">
              <el-tag
                style="margin: 5px"
                v-if="detailsObj.status ? detailsObj.status == 1 : false"
                type="warning"
                >待发货</el-tag
              >
              <el-tag
                style="margin: 5px"
                v-if="detailsObj.status ? detailsObj.status == 2 : false"
                type="warning"
                >待收货</el-tag
              >
              <el-tag
                style="margin: 5px"
                v-if="detailsObj.status ? detailsObj.status == 3 : false"
                type="success"
                >交易完成</el-tag
              >
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            style="margin-top: 20px"
            class="margin-top"
            :column="3"
            title="商品信息"
            border
            labelClassName="labelView"
          >
            <el-descriptions-item label="供货商名称">
              {{ detailsObj.supplier_name ? detailsObj.supplier_name : "-" }}
            </el-descriptions-item>
            <el-descriptions-item label="供货商ID">
              {{ detailsObj.supplier_id ? detailsObj.supplier_id : "-" }}
            </el-descriptions-item>

            <el-descriptions-item label="商品名称" :span="2">
              {{
                detailsObj.supplier_goods_name
                  ? detailsObj.supplier_goods_name
                  : "-"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="商品ID">
              {{
                detailsObj.supplier_goods_id
                  ? detailsObj.supplier_goods_id
                  : "-"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="商品图片">
              <div style="width: 40px; height: 40px; margin: 0 auto">
                <el-image
                  :src="
                    detailsObj.supplier_goods_main_image
                      ? detailsObj.supplier_goods_main_image
                      : '-'
                  "
                  :preview-src-list="[
                    detailsObj.supplier_goods_main_image
                      ? detailsObj.supplier_goods_main_image
                      : '-',
                  ]"
                />
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="商品规格名称">
              {{
                detailsObj.supplier_sku_name
                  ? detailsObj.supplier_sku_name
                  : "-"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="商品规格图片">
              <div style="width: 40px; height: 40px; margin: 0 auto">
                <el-image
                  :src="
                    detailsObj.supplier_sku_img
                      ? detailsObj.supplier_sku_img
                      : '-'
                  "
                  :preview-src-list="[
                    detailsObj.supplier_sku_img
                      ? detailsObj.supplier_sku_img
                      : '-',
                  ]"
                />
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="商品规格单位">
              {{
                detailsObj.supplier_sku_unit
                  ? detailsObj.supplier_sku_unit
                  : "-"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="商品规格成本价">
              {{
                detailsObj.supplier_sku_cost_price
                  ? detailsObj.supplier_sku_cost_price
                  : "-"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="商品规格零售价">
              {{
                detailsObj.supplier_sku_retail_price
                  ? detailsObj.supplier_sku_retail_price
                  : "-"
              }}
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions
            style="margin-top: 20px"
            class="margin-top"
            :column="3"
            title="订单信息"
            border
            labelClassName="labelView"
          >
            <el-descriptions-item label="支付时间">
              {{ detailsObj.created_at ? detailsObj.created_at : "-" }}
            </el-descriptions-item>
            <el-descriptions-item label="购买数量">
              {{ detailsObj.buy_number ? detailsObj.buy_number : "-" }}
            </el-descriptions-item>
            <el-descriptions-item label="支付单号" :span="2">
              {{ detailsObj.pay_order_no ? detailsObj.pay_order_no : "-" }}
            </el-descriptions-item>
            <el-descriptions-item label="订单流水号" :span="2">
              {{ detailsObj.order_trade_no ? detailsObj.order_trade_no : "-" }}
            </el-descriptions-item>

            <el-descriptions-item label="收货人">
              {{
                detailsObj.delivery_address
                  ? detailsObj.delivery_address.recipient
                  : "-"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="收货人电话">
              {{
                detailsObj.delivery_address
                  ? detailsObj.delivery_address.phone_number
                  : "-"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="省市区" :span="2">
              {{
                detailsObj.delivery_address
                  ? detailsObj.delivery_address.district_name
                  : "-"
              }}
              {{
                detailsObj.delivery_address
                  ? detailsObj.delivery_address.city_name
                  : "-"
              }}
              {{
                detailsObj.delivery_address
                  ? detailsObj.delivery_address.province_name
                  : "-"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="详细地址">
              {{
                detailsObj.delivery_address
                  ? detailsObj.delivery_address.address_details
                  : "-"
              }}
            </el-descriptions-item>
          </el-descriptions>
        </el-row>
        <el-row style="position: relative" v-if="recordsList.length !== 0">
          <el-descriptions
            v-for="(item, index) in recordsList"
            :key="index"
            :column="5"
            border
            title="物流信息"
            style="margin-top: 10px"
          >
            <el-descriptions-item :span="1">
              <template slot="label"> 发货ID </template>
              {{ item.delivery_id }}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label"> 快递名称 </template>
              {{ item.express_name }}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label"> 快递单号 </template>
              {{ item.express_num }}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label"> 发货状态 </template>
              {{ item.status }}
            </el-descriptions-item>
            <el-descriptions-item :span="3">
              <template slot="label"> 发货时间 </template>
              {{ item.created_at }}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label"> 收货人 </template>
              {{ item.recipient }}
            </el-descriptions-item>
            <el-descriptions-item :span="3">
              <template slot="label"> 收货人电话 </template>
              {{ item.phone_number }}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label"> 收货人省市区 </template>
              {{ item.province_name }}
              {{ item.city_name }}
              {{ item.district_name }}
            </el-descriptions-item>
            <el-descriptions-item :span="3">
              <template slot="label"> 收货详细地址 </template>
              {{ item.address_details }}
            </el-descriptions-item>
          </el-descriptions>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detaildialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSupplyOrderList,
  editDelivery,
  getSupplyryList,
} from "@/api/order/index";
const tableTheadOption = {
  created_at: {
    label: "下单时间",
    field: "created_at",
  },
  pay_time: {
    label: "支付时间",
    field: "pay_time",
  },
  detail_id: {
    label: "订单id",
    field: "detail_id",
  },
  supplier_id: {
    label: "供货商ID",
    field: "supplier_id",
  },
  supplier_name: {
    label: "供货商名称",
    field: "supplier_name",
  },
  order_trade_no: {
    label: "订单流水号",
    field: "order_trade_no",
  },
  pay_order_no: {
    label: "支付单号",
    field: "pay_order_no",
  },
  buy_number: {
    label: "购买数量",
    field: "buy_number",
  },
  sku_img: {
    label: "规格图",
    field: "sku_img",
  },
  supplier_goods_id: {
    label: "商品ID",
    field: "supplier_goods_id",
  },
  supplier_goods_name: {
    label: "商品名称",
    field: "supplier_goods_name",
  },
  supplier_goods_main_image: {
    label: "商品图片",
    field: "supplier_goods_main_image",
  },
  supplier_sku_name: {
    label: "商品规格名称",
    field: "supplier_sku_name",
  },
  supplier_sku_img: {
    label: "商品规格图片",
    field: "supplier_sku_img",
  },
  supplier_sku_unit: {
    label: "商品规格单位",
    field: "supplier_sku_unit",
  },
  supplier_sku_cost_price: {
    label: "商品规格成本价",
    field: "supplier_sku_cost_price",
  },
  supplier_sku_retail_price: {
    label: "商品规格零售价",
    field: "supplier_sku_retail_price",
  },
  delivery_address: {
    label: "收货人省市区",
    field: "delivery_address",
  },
  addressetail_id: {
    label: "地址ID",
    field: "delivery_address.detail_id",
  },
  recipient: {
    label: "收货人名称",
    field: "delivery_address.recipient",
  },
  phone_number: {
    label: "收货人电话",
    field: "delivery_address.phone_number",
  },
  address_details: {
    label: "详细地址",
    field: "delivery_address.address_details",
  },
};
const allTableThead = [
  "created_at",
  "pay_time",
  "detail_id",
  "supplier_id",
  "supplier_name",
  "order_trade_no",
  "pay_order_no",
  "buy_number",
  "sku_img",
  "supplier_goods_id",
  "supplier_goods_name",
  "supplier_goods_main_image",
  "supplier_sku_name",
  "supplier_sku_img",
  "supplier_sku_unit",
  "supplier_sku_cost_price",
  "supplier_sku_retail_price",
  "delivery_address",
  "recipient",
  "phone_number",
  "address_details",
];
const defaultTableThead = [
  "created_at",
  "supplier_name",
  "pay_order_no",
  "buy_number",
  "supplier_goods_name",
  "supplier_goods_main_image",
  "supplier_sku_name",
  "supplier_sku_unit",
  "supplier_sku_cost_price",
  "supplier_sku_retail_price",
  "delivery_address",
  "recipient",
  "phone_number",
  "address_details",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      searchDisplay: false,
      searchForm: {
        status: "", // 订单状态：1=待发货；2=待收货；3=交易完成
        supplier_goods_id: "", // 供货商商品ID检索
        supplier_goods_name: "", // 商品名称检索
        supplier_id: "", // 供货商ID检索
        order_trade_no: "", // 订单流水号检索
        pay_order_no: "", // 根据订单支付单号检索
        user_nickname: "", // 根据用户昵称检索
        user_mobile: "", // 根据用户手机号检索
        addr_recipient: "", // 根据收货人姓名检索
        addr_phone_number: "", // 收货人电话检索
        addr_details: "", // 	根据收货地址检索
        create_time_start: "", // 下单起始时间（例：2023-10-01 12:20）
        create_time_end: "", // 下单截至时间（例：2023-10-02 12:20）
        pay_time_start: "", // 支付起始时间（例：2023-10-01 12:20）
        pay_time_end: "", // 支付成截至时间（例：2023-10-02 12:20）
        pageSize: 10,
        page: 1,
      },
      create_time: [],
      pay_time: [],
      OrderList: [],
      total: 0,
      dialogSendOutGoods: false,
      dialogSendOutGoodsSubmit: false,
      form: {
        detail_id: "",
        express_name: "",
        express_num: "",
      },
      rules: {
        express_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (value == "") {
                return callback(new Error("请输入快递名称"));
              } else {
                if (req.test(value)) {
                  return callback(
                    new Error("快递单号格式不正确,不能包含特殊字符")
                  );
                }
                callback();
              }
            },
            trigger: "change",
          },
        ],
        express_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z]/g;
              if (value == "") {
                return callback(new Error("请输入快递单号"));
              } else {
                if (req.test(value)) {
                  return callback(
                    new Error("快递单号格式不正确,只能包含数字和英文")
                  );
                }
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      dialogdelivery: false,
      delivery_list: [],
      detailsObj: {},
      detaildialog: false,
      detailLoading: false,
      recordsList: [], // 发货记录
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    getListWay() {
      this.loading = true;
      getSupplyOrderList(this.searchForm)
        .then((res) => {
          this.loading = false;
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg);
          }
          this.OrderList = res.data.list;
          this.total = res.data.total;
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    resetting() {
      this.searchForm = {
        status: "",
        user_id: "",
        order_no: "",
        phone_number: "",
        pageSize: 10,
        page: 1,
      };
      this.getListWay();
    },
    // 打开修改备注的弹框
    editNotesWay(row) {
      this.dialogSendOutGoods = true;
      this.$nextTick(() => {
        this.SendOutGoodsClose();
        this.form.detail_id = row.detail_id;
      });
    },
    SendOutGoodsClose() {
      this.form = {
        detail_id: "",
        express_name: "",
        express_num: "",
      };
      this.$refs.form.resetFields();
    },
    submitWay() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogSendOutGoodsSubmit = true;
          editDelivery(this.form)
            .then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                return this.$messages.error(res.msg);
              }
              this.SendOutGoodsClose();
              this.dialogSendOutGoods = false;
              this.dialogSendOutGoodsSubmit = false;
              this.$messages.success(res.msg);
              this.getListWay();
            })
            .catch((err) => {
              this.dialogSendOutGoodsSubmit = false;
              this.$messages.error(err.msg);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    drawerHandle(row) {
      this.delivery_list = row.delivery_list;
      this.dialogdelivery = true;
    },
    pathWay() {
      this.$router.push("/supplier/orderlist/supplierafter");
    },
    create_timeWay(vla) {
      this.searchForm.create_time_start = vla[0];
      this.searchForm.create_time_end = vla[1];
    },
    pay_timeWay(vla) {
      this.searchForm.pay_time_start = vla[0];
      this.searchForm.pay_time_end = vla[1];
    },
    detailsDialogway(row) {
      this.detaildialog = true;
      this.detailLoading = true;
      getSupplyryList({ detail_id: row.detail_id }).then((res) => {
        this.detailsObj = JSON.parse(JSON.stringify(row));
        if (res.code !== 200 || res.status !== 1) {
          this.detailLoading = false;
          return this.$messages.error(res.msg);
        }
        this.recordsList = res.data;
        this.detailLoading = false;
      });
    },
  },
};
</script>

<style lang="scss">
.labelView {
  width: 150px;
}
</style>